<template>
    <div class="event-wrapper">
        <DataGrid :auto-load="autoLoad" border ref="tableRef" :pagination="false">
            <template #toolbar-search>
                <div class="query-from-box">
                    <el-form :model="queryData">
                        <el-form-item>
                            <el-input v-model="queryData.eventName" placeholder="事件名称/标识符" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="queryData.eventType" placeholder="事件类型" clearable>
                                <el-option
                                    v-for="(value, key) in thingEventType"
                                    :label="value"
                                    :key="key"
                                    :value="key"
                                />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <el-table-column type="index" label="序号" width="60" align="center" fixed />
            <el-table-column label="事件名称" show-overflow-tooltip fixed>
                <template #default="{ row }">
                    <el-link type="primary" :underline="false" @click="onViewItem(row)">{{ row.displayName }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="eventName" label="标识符" show-overflow-tooltip />
            <el-table-column label="事件类型">
                <template #default="scope">
                    <span class="table-item-status" :status="thingEventType[scope.row.eventType]">
                        {{ thingEventType[scope.row.eventType] }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="输出参数">
                <template #default="{ row }">
                    {{
                        Array.isArray(tryJsonParse(row.outputParam, []))
                            ? tryJsonParse(row.outputParam, [])
                                  .map(item => item.paramName)
                                  .join('; ')
                            : ''
                    }}
                </template>
            </el-table-column>
        </DataGrid>
    </div>
</template>
<script setup lang="ts">
import { IoTProductService } from '@great/services';
import type { SysMetadataObject } from '@great/services';
import { thingEventType } from '@/utils/constant';
import { DataGrid, type DataGridInstance } from '@great/components';
import { showPopupBox, tryJsonParse } from '@great/utils';
import EventFormModal from '@/pages/model/thing/components/detail/thingModel/components/EventFormModal.vue';

const attributeTypeList = inject<any>('AttributeTypeList');
const props = defineProps<{
    detailData?: SysMetadataObject;
}>();
// 查询条件
const queryData = ref({
    queryObjectName: props.detailData?.objectName,
    eventType: '',
    eventName: ''
});
const tableRef = useTemplateRef<DataGridInstance>('tableRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await IoTProductService.getThingEventPage({
            ...queryData.value
        });
        return { data: res.data };
    }
});
function onViewItem(row: any) {
    showPopupBox(EventFormModal, {
        readOnly: true,
        detail: row,
        modelDetail: props.detailData!,
        attributeTypeList: attributeTypeList.value
    });
}
</script>
<style scoped lang="scss">
.event-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
    :deep(.data-grid) {
        .table-item-status {
            display: flex;
            align-items: center;
            &::before {
                content: '';
                width: 6px;
                height: 6px;
                display: inline-block;
                border-radius: 50%;
                margin-right: 5px;
            }
        }
        .table-item-status[status='普通'] {
            &::before {
                background-color: #409eff;
            }
        }
        .table-item-status[status='报警'] {
            &::before {
                background-color: #f56c6c;
            }
        }
        .table-item-status[status='异常'] {
            &::before {
                background-color: #e6a23c;
            }
        }
    }
}
</style>
